import React from 'react';
import PropTypes from 'prop-types';

// 假设，这是小明创建的 List 组件
const List = ({ pageSize = 10, colors, gender }) => {
  // 组件内定义一个变量，会在报错log中显示
  const arr = colors;
  const list = arr.map((item, index) => <li key={index}>{item}</li>);
  return (
    <div>
      <ul>{list}</ul>
      <div>gender: {gender}</div>
      <div>pageSize: {pageSize}</div>
    </div>
  );
};

// 添加属性约束
List.propTypes = {
  colors: PropTypes.array,
  gender: PropTypes.oneOf(['男', '女']).isRequired,
  pageSize: PropTypes.number,
};

// 函数组件可以不用这种方式定义默认值
// List.defaultProps = {
//   pageSize: 10,
// };

export class App extends React.Component {
  render() {
    // 小红使用小明创建的 List 组件
    return <List colors={[1, 2, 3]} gender={'男'} />;
  }
}
